<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <!--react.js为当前页面提供了一个新的对象，React-->
  <script src="js/react.development.js"></script>
  <!--react-dom.js为当前页面提供了一个新的对象，ReactDOM-->
  <!--注意，ReactDOM依赖于React对象-->
  <!--这也就意味着，一定要先导入react.development.js再导入react-dom.development.js-->
  <script src="js/react-dom.development.js"></script>
</head>

<body>
  <div id="app"></div>
  <script>
    /**React提供了‘轻量级对象’代替了DOM的‘重量级对象’**/
    //1.创建子元素
    let child = React.createElement(
      'button', //参数1：标签的名称
      { title: '提交登录信息', className: 'dl' }, //参数2:标签的属性对象
      '登 录',//之后的参数：标签的内容，本质上是通过innerHtml设置的标签内部内容，可以是文本内容，也可以是其他子标签
      "哈哈哈",
      "呵呵呵",
      React.createElement(
        'div',
        {},
        "我是一个div"
      )
    )
    //检查发现，React创建的是轻量级对象
    console.log(child)
    //2.获取父元素
    //此方法本质上是基于一个原生Dom元素对象转换出对应的虚拟Dom元素对象返回
    let parent = ReactDOM.createRoot(document.getElementById("app"));
    //3.将子元素挂载到父元素
    //渲染操作，在父元素内渲染子元素
    //将子元素挂载到父元素上，并绘制到页面中
    parent.render(child); 
  </script>
</body>

</html>